<template>
    <el-dialog v-model="dialogVisible" :title="title" :width="width">
        <el-button v-if="defaultParams.type == 1" class="one-click" @click="handleRemind">一键提醒</el-button>
        <ZwTable
            v-if="dialogVisible"
            ref="tableRef"
            class="table-box-custom"
            tab-h="450px"
            :option="tableOption"
            :fetch-params="fetchParams"
            :fetch-api="fetchApi()">
        </ZwTable>
    </el-dialog>
    <!-- 提醒弹窗 -->
    <ZWRemid ref="remidRef" @submit="remindConfirm"></ZWRemid>
</template>

<script setup lang="tsx">
import { reactive, ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import ZwTable from '@/components/zw/table/Table';
import ZWRemid from '../../components/ZWRemid.vue';
import { customerRemind, channelGroupsRemind, getWorkUserMassDetail } from '@/api/channel/index';

/* ----------------------------------- props ----------------------------------- */
const props = defineProps({
    // 一键提醒类型
    touchType: {
        type: [String, Number],
        default: 1 // 1 客户群发 2 客户群群发
    }
});

/* ----------------------------------- 弹窗 ----------------------------------- */
// 弹窗展示/隐藏
const dialogVisible = ref(false);
// 弹窗标题
const title = computed(() => {
    return `${defaultParams.type == 1 ? '未' : '已'}发送员工`;
});
// 弹窗宽度
const width = computed(() => {
    return defaultParams.type == 1 ? 700 : 800;
});
/**
 * @description: 打开弹窗
 * @param {*} id 当前行id
 * @return {*}
 */
const handleOpen = (row: any, sendType: any) => {
    defaultParams.type = sendType;
    defaultParams.send_msg_id = row?.id;
    if (sendType == 1) {
        notSendNum.value = row?.work_user_not_send_num || 0;
    }
    handleDialog(true);
};
/**
 * @description: 控制弹窗展示/隐藏
 * @param {*} visible 展示/隐藏
 * @return {*}
 */
const handleDialog = (visible: any) => {
    dialogVisible.value = visible;
};

/* ---------------------------------- 表格数据 ---------------------------------- */
// 查询基本参数
const defaultParams = reactive({
    send_msg_id: '', // 当前行id
    type: 1 // 1 未发送 2已发送
});
// 最终查询参数
const fetchParams = computed(() => {
    return {
        ...defaultParams,
        touch_type: props.touchType
    };
});
// 状态颜色
const StatusColorOption = {
    1: '#F14144',
    2: '#2FB6E4'
};
// 表格基本列
const baseCol = reactive([
    {
        prop: 'name',
        label: '员工姓名',
        minWidth: 200,
        showOverflowTooltip: true
    },
    {
        prop: 'alias',
        label: '别名',
        minWidth: 200,
        showOverflowTooltip: true
    },
    {
        prop: 'status_name',
        label: '发送状态',
        minWidth: 150,
        render({ row }) {
            return (
                <span
                    class="custom-status-point"
                    style={{
                        '--status-bgcolor': StatusColorOption[row.status]
                    }}>
                    {row.status_name}
                </span>
            );
        }
    }
]);
// 表格最终列
const tableOption = computed(() => {
    // 已发送员工显示发送时间
    if (defaultParams.type == 2) {
        return [
            ...baseCol,
            {
                prop: 'send_time',
                label: '发送时间',
                minWidth: 200
            }
        ];
    }
    return baseCol;
});
// 表格数据接口
const fetchApi = () => {
    return getWorkUserMassDetail;
};

/* ---------------------------------- 一键提醒 ---------------------------------- */
// 提醒弹窗ref
const remidRef = ref();
// 未发送人数量
const notSendNum = ref(0);
/**
 * @description: 打开提醒弹窗
 * @return {*}
 */
const handleRemind = () => {
    remidRef.value.content = `<div>您将提醒到<span style="color:#FF6B00"> ${notSendNum.value} </span>位未发送的员工，</div><div>点击确认后一键提醒。</div>`;
    remidRef.value.appDialog.visible = true;
};
// 获取一键提醒方法，1是客户群发提醒，2是客户群群发提醒
const remindRequest = computed(() => {
    return props.touchType == 1 ? customerRemind : channelGroupsRemind;
});
/**
 * @description: 提醒确认
 * @return {*}
 */
const remindConfirm = async () => {
    await remindRequest?.value({
        send_msg_id: defaultParams.send_msg_id
    });
    ElMessage.success('提醒成功');
    remidRef.value.appDialog.visible = false;
    handleDialog(false);
};

/* ---------------------------------- 对外方法 ---------------------------------- */
defineExpose({
    handleOpen
});
</script>

<style scoped lang="scss">
:deep(.custom-status-point) {
    display: flex;
    align-items: center;
    line-height: normal;

    &::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 8px;
        background-color: var(--status-bgcolor);
        border-radius: 4px;
    }
}

.table-box-custom {
    :deep(.el-table) {
        min-height: 450px;
    }
}
</style>
